<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Thief Example</title>
    <script src="https://cdn.jsdelivr.net/npm/colorthief@2.3.2/dist/color-thief.min.js"></script>
</head>
<body>
    <img id="image" style="max-height: 500px;" src="../../assets/images/ColorThief/2.jpg" alt="Image" crossorigin="anonymous">

    <div id="color"></div>

    <script>
        // 获取图像元素
        var image = document.getElementById('image');

        // 创建 ColorThief 实例
        var colorThief = new ColorThief();

        // 提取颜色
        var dominantColor = colorThief.getColor(image);
        var palette = colorThief.getPalette(image, 5); // 获取颜色调色板

        // 将颜色显示在页面上
        var colorDiv = document.getElementById('color');
        colorDiv.innerHTML = `
            <p>Dominant Color: RGB(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})</p>
            <p>Palette:</p>
            <ul>
                ${palette.map(color => `<li>RGB(${color[0]}, ${color[1]}, ${color[2]})</li>`).join('')}
            </ul>
        `;
    </script>
</body>
</html>
